<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	.cartList {
		overflow: hidden;
	}
	.cartList .item {
		position: relative;
		padding: 0.5rem 0.75rem 0.5rem 2rem;
		background-color: #FFF;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.cartList .item .del {
		position: absolute;
		left: 100%;
		top: 0;
		height: 100%;
		width: 60px;
		background: #FF445B;
		color: #FFF;
		font-size: 0.75rem;
		text-align: center;
	}
	.cartList .item .check {
		position: absolute;
		left: 0;
		top: 0;
		width: 2rem;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 1rem;
		background-image: url(../../image/common/radio_off.png);
	}
	.cartList .item.on .check {
		background-image: url(../../image/common/radio_on.png);
	}
	.cartList .item .photo {
		margin-right: 0.5rem;
		width: 3.6rem;
		height: 3.6rem;
	}
	.cartList .item .textBox {
		min-height: 3.6rem;
	}
	.cartList .item .price {
		font-size: 0.9rem;
	}
	.cartList .title {
		font-size: 0.6rem;
		margin-bottom: 0.1rem;
	}
	.swipeleft{
		-webkit-transform:translateX(-60px);
		transform:translateX(-60px);
	}
	.numBox {
		line-height: 1.25rem;
		border: 1px solid #E7E7E7;
		text-align: center;
		color: #ADADAD;
	}
	.up,.down{
		width: 1.25rem;
		line-height: 1.25rem;
		text-align: center;
	}
	.numBox .num {
		text-align: center;
		font-size: 0.6rem;
		color: #555555;
		line-height: 1.25rem;
		min-width: 2rem;
		padding: 0 0.25rem;
	}
</style>
</head>
<body class="bg-f5">
	<div class="cartList lastNoBorder" id="list_html">
		<!-- <div class="item aui-border-b" data-ind="{{= i}}" data-price="{{= it[i].EcmGoodsInfo.GodSellPrice}}" data-num="{{= it[i].ShcGoodsNumber}}" data-cartId="{{= it[i].ShcId}}">
			<div class="check" tapmode onClick="checkThis(this);"></div>
			<div class="del aui-flex-col aui-flex-middle aui-flex-center" tapmode onClick="delThis(this);">删除</div>
			<div class="aui-flex-col aui-flex-middle" tapmode onClick="openProduct('{{= it[i].EcmGoodsInfo.GodCode}}');">
				<div class="photo"><img src="../../image/demo/02.jpg" alt=""></div>
				<div class="flex-auto aui-flex-row aui-flex-between textBox">
					<div>
						<div class="title aui-ellipsis-2">规格：</div>
						<div class="color-666 aui-font-size-12">规格：1</div>
					</div>
					<div class="aui-flex-col aui-flex-middle aui-flex-between">
						<div><span class="price color-red font-helvet">¥398.00</span></div>
						<div class="aui-flex-col aui-flex-middle aui-flex-between numBox">
							<div class="down aui-border-r">-</div>
							<div class="num">1</div>
							<div class="up aui-border-l">+</div>
						</div>
					</div>
				</div>
			</div>
		</div> -->

	</div>
	<div class="notData aui-hide aui-flex-row aui-flex-middle">
		<div class="ico"><img src="../../image/notdata/13.png" alt=""></div>
	</div>

	<script type="text/x-dot-template" id="list_tpl">
		{{ for(var i in it) { }}
		<div class="item" data-ind="{{= i}}" data-discount="{{= it[i].discount}}" data-price="{{= it[i].goods_unit_price}}" data-pay="{{= it[i].goods_pay_price}}">
			<div class="check" tapmode onClick="checkThis(this);"></div>
			<div class="del aui-flex-col aui-flex-middle aui-flex-center" tapmode onClick="delThis(this);">删除</div>
			<div class="aui-flex-col aui-flex-middle">
				<div class="photo" tapmode onClick="openGoodsDetail('{{= it[i].goods_id}}');"><img src="{{= it[i].goods_cover || '../../image/demo/02.jpg'}}" alt=""></div>
				<div class="flex-auto aui-flex-row aui-flex-between textBox">
					<div tapmode onClick="openGoodsDetail('{{= it[i].goods_id}}');">
						<div class="title aui-ellipsis-2">{{= it[i].goods_name || ''}}</div>
						<div class="color-666 aui-font-size-12">{{= it[i].goods_attr_names ? it[i].goods_attr_names + ',' : ''}}{{= it[i].goods_spec_names || ''}}</div>
					</div>
					<div class="aui-flex-col aui-flex-middle aui-flex-between">
						<div><span class="price color-red font-helvet">¥{{= it[i].goods_unit_price || ''}}</span></div>
						<div class="aui-flex-col aui-flex-middle aui-flex-between numBox">
							<div class="down aui-border-r" tapmode onclick="minus(this);">-</div>
							<div class="num">{{= it[i].goods_count || '1'}}</div>
							<div class="up aui-border-l" tapmode onclick="plus(this);">+</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		{{ } }}
	</script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var USER_INFO;
var _CART_DATA_ = [];
var totalMoney = 0;	//总金额
var totalPrice = 0;	//总的支付金额
var totalDiscount = 0;	//总的优惠金额
var afterCartInfo = [];
apiready = function(){
	api.parseTapmode();
	if(!getUserId()){
		openLogin();
		return;
	}
	USER_INFO = getUserinfo();
	if(getPrefs('_CART_DATA_')){
		_CART_DATA_ = getPrefs('_CART_DATA_');
	}
	showPage();

	//监听下单成功 刷新购物车
	api.addEventListener({
		name: 'addOrderSuccessEvent'
	}, function(ret, err){
		_CART_DATA_ = afterCartInfo;
		setPrefs('_CART_DATA_',_CART_DATA_);
		showPage();
		isCheckAll();
		totalFn();
	});

};

function showPage(){
	if(_CART_DATA_.length){
		$$('.notData').addClass('aui-hide');
		var tpl = $$('#list_tpl').html();
		var tempFn = doT.template(tpl);
		$$('#list_html').html(tempFn( _CART_DATA_ ));
		api.parseTapmode();
	}else{
		$$('#list_html').html('');
		$$('.notData').removeClass('aui-hide');
	}
}

// 删除
function delThis(el){
	var item = $$(el).parents('.item');
	var ind = item.data('ind');
	_CART_DATA_.splice(ind,1);
	setPrefs('_CART_DATA_',_CART_DATA_);
	item.remove();
	isCheckAll();
	totalFn();
	toast('删除成功');
	if(!_CART_DATA_.length){
		$$('.notData').removeClass('aui-hide');
	}
	api.sendEvent({
		name: 'cartUpdateEvent'
	});
}
// 选中一个
function checkThis(el){
	$$(el).parents('.item').toggleClass('on');

	isCheckAll();
	totalFn();
}
//判断是否全部选中
function isCheckAll(){
	var allLen = $$('.cartList .item').length;
	var checkLen = $$('.cartList .item.on').length;
	var isAll;
	if(checkLen == allLen && allLen!=0){
		isAll = true;
	}else{
		isAll = false;
	}
	api.execScript({
		script: 'setActive('+isAll+')'
	});
}
//计算总价
function totalFn(){
	totalMoney = 0;
	totalPrice = 0;
	totalDiscount = 0;
	$$('.cartList .item.on').each(function(){
		var ind = $$(this).data('ind');
		var price = parseFloat($$(this).data('price'));
		var pay = parseFloat($$(this).data('pay'));
		var discount = price - pay;
		var num = parseInt($$(this).find('.num').text());

		var itemTotal = price * num;	//该商品的总价
		var itemDiscount = discount * num;	//该商品的总折扣
		var itemPay = pay * num;	//该商品的支付价格

		totalMoney += itemTotal;			//所有选中商品总金额
		totalDiscount += itemDiscount;		//所有选中商品总折扣
		totalPrice += itemPay;				//所有选中商品支付价格
		// log('------')
		// log('总金额')
		// log(itemTotal)
		// log('总支付')
		// log(itemPay)
		// log('总折扣')
		// log(itemDiscount)
	});
	totalMoney = totalMoney.toFixed(2);
	totalDiscount = totalDiscount.toFixed(2);
	totalPrice = totalPrice.toFixed(2);

	// log('---------------------------')
	// log('总金额')
	// log(totalMoney)
	// log('总支付')
	// log(totalPrice)
	// log('总折扣')
	// log(totalDiscount)
	api.execScript({
		script: 'changeData("#totalPrice",'+totalPrice+')'
	});
	api.execScript({
		script: 'changeData("#discount",'+totalDiscount+')'
	});
}
function checkAll(n){
	if(n){
		$$('.cartList .item').addClass('on');
	}else{
		$$('.cartList .item').removeClass('on');
	}
	totalFn();
}
//左滑删除
var swipeFlag = false;
var x, y, X, Y, swipeX, swipeY;
$$('.cartList').on('touchstart', '.item', function (event) {
	x = event.changedTouches[0].pageX;
	y = event.changedTouches[0].pageY;
	swipeX = true;
	swipeY = true;
	if(swipeFlag){
		$$('.swipeleft').removeClass('swipeleft');
	}
});
$$('.cartList').on('touchmove', '.item', function (event) {
	var _this = $$(this);
	X = event.changedTouches[0].pageX;
	Y = event.changedTouches[0].pageY;
	// 左右滑动
	if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
		// 阻止事件冒泡
		event.stopPropagation();
		if(X - x > 10){   //右滑
			event.preventDefault();
			_this.removeClass('swipeleft');    //右滑收起
			swipeFlag = false;
		}
		if(x - X > 10){   //左滑
			event.preventDefault();
			_this.addClass('swipeleft');   //左滑展开
			swipeFlag = true;
		}
		swipeY = false;
	}
	// 上下滑动
	if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
		swipeX = false;
	}
});

// 付款
function buy(){
	if( !$$('.cartList .item.on').length ){
		toast('您还没有选择商品');
		return;
	}
	var infos = {
		data: [],
		count: 0,
		totalPrice: totalPrice
	};
	afterCartInfo = [];
	$$('.cartList .item').each(function(){
		var ind = $$(this).data('ind');
		var itemInfo = _CART_DATA_[ind];
		var num = parseInt($$(this).find('.num').text());
		if( $$(this).hasClass('on') ){
			infos.count = parseInt(infos.count) + num;
			infos.data.push(itemInfo);
		}else{
			afterCartInfo.push(itemInfo);
		}

	});
	api.openWin({
	    name: 'confirm_win',
	    url: 'confirm_win.html',
		pageParam: {
			frameName: api.frameName,
			goodsInfo: infos
		}
	});
}

//加减
function minus(el){
	var item = $$(el).parents('.item');
	var itemInd = item.data('ind');
	var numBox = $$(el).parents('.numBox');
	var num = parseInt(numBox.find('.num').text());
	num--;
	num = num<1 ? 1 : num;
	numBox.find('.num').text(num);
	_CART_DATA_[itemInd].goods_count = num;
	setPrefs('_CART_DATA_',_CART_DATA_);
	isCheckAll();
	totalFn();
	event.stopPropagation();
}
function plus(el){
	var item = $$(el).parents('.item');
	var itemInd = item.data('ind');
	var numBox = $$(el).parents('.numBox');
	var num = parseInt(numBox.find('.num').text());
	num++;
	numBox.find('.num').text(num);
	_CART_DATA_[itemInd].goods_count = num;
	setPrefs('_CART_DATA_',_CART_DATA_);
	isCheckAll();
	totalFn();
	event.stopPropagation();
}
</script>
</html>
